<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        div-div-div
        <span>sss</span>
    </div>
    <p>123213213</p>
    <h1>122</h1>


    <script>
        var box = document.getElementById('box')
        console.log(box.parentNode)
        console.log(box.childNodes)
        console.log(box.children)
        console.log(box.nextSibling)//下一个---》但是有换行情况下，换行也会被看委员IG
        console.log(box.previousSibling)//上一个
        console.log(box.firstChild)
        console.log(box.lastChild)



        /*
        onclick  鼠标单击
        ondblclick  鼠标双击
        
        onmouseover 鼠标悬停
        onmouseout  鼠标离开
        onmousedown  鼠标按下
        onmouseup  鼠标松开
        onmousemove 鼠标移动到的时候

        onkeydown  键盘按下
        onkeyup   键盘松开
        onkeypress  键盘按下并松开

        onfocus  表单获取焦点
        onblur  表单失去焦点
        onchange  表单发生改变的时候

        存在和事件同名的方法（去了on的）
        事件对象:当你触发一个事件的时候触发事件对象
        
        keycode

        clientX  clientY
        pageX  pageY
        
        
        
        */

    </script>
</body>
</html>